import React, { useRef, FC,useImperativeHandle,useState ,forwardRef,useEffect} from 'react'
import { withRouter } from 'react-router-dom'
import {Button,Input,DatePicker,Modal,Spin,Upload, Table,Form,Steps,Tabs,Row,Col} from 'antd';
import {formItemLayout,modalLayoutSm} from '@/config/layout';
import { PlusOutlined } from '@ant-design/icons';
import './index.less'
import $axios from '@/utils/axios';
import { connect } from 'react-redux'
import * as actions from '@/store/actions'
let onProgress1 = null;
interface Props extends ReduxProps {}
const RoleList: FC<Props> = ({
  storeData: {logoInfo },
  setStoreData
}) => {
  const [imageUrl,setimageUrl] = useState('');
  const [form] = Form.useForm()
  const [formdatavalues,setformdata] = useState(null);
  const { setFieldsValue } = form
  const uploadprops = {
    // // 'customRequest':customRequest
    // name: 'file',
    // action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    // headers: {
    //   authorization: 'authorization-text',
    // },
    action: '/dm/api/v1/common/file/upload',
    multiple: false,
    data: { },
    headers: {
      Authorization: '$prefix $token',
    },
    onStart(file) {
      // setFileName(file.name);
      setFieldsValue({
        file:file.name
      })
    },
    onSuccess(res, file) {
      console.log('onSuccess', res, file.name);
    },
    onError(err) {
      console.log('onError', err);
    },
    onProgress({ percent }, file) {
      console.log('onProgress', `${percent}%`, file.name);
    },
    handleChange (info){
      console.log(info);
    },
    customRequest({
      action,
      data,
      file,
      filename,
      headers,
      onError,
      onProgress,
      onSuccess,
      withCredentials,
    }) {
      onProgress1 = onProgress;
      const formData = new FormData();
      if (data) {
        Object.keys(data).forEach(key => {
          formData.append(key, data[key]);
        });
      }
      formData.append(filename, file);
      $axios
      .post('/dm/api/common/logo/upload', formData, {
        withCredentials,
        headers,
        onUploadProgress: ({ total, loaded }) => {
          console.log(Math.round((loaded / total) * 100).toFixed(2));
        },
      })
      .then((response) => {
        let {data} = response;
        setimageUrl(data['url'])
      })
      .catch((err)=>{
        
      });
     
      return {
        abort() {
          console.log('upload progress is aborted.');
        },
      };
    }
  };
  useEffect(()=>{
    setFieldsValue({
      title:logoInfo['title'],
      "icp": logoInfo['icp'],
      "unitName": logoInfo['unitName']
    })
    setimageUrl(logoInfo['path'])
  },[logoInfo])

  useEffect(()=>{
    // document.getElementById('document_title_id').innerHTML = logoInfo['title'];
    // // eslint-disable-next-line
    // document.getElementById('document_favicon_id')['href'] = window.location.origin+'/files'+logoInfo['path']
  },[logoInfo])
  const save = ()=>{
    console.log('八寸');
    form.validateFields().then((vals) => {
      const Obj = form.getFieldsValue()
      let url = '/dm/api/sys/common/logo-title/edit'
      Obj['logoPath'] = imageUrl;
      $axios
      .put(url,Obj)
      .then((response) => {
        let {data} = response;
        setStoreData('SET_LOGO', {
          path:Obj['logoPath'],
          title:Obj['title'],
          icp:Obj['icp'],
          unitName:Obj['unitName']
        })
      })
      .catch((err)=>{
        
      });
     
     
    }).catch(info => {
      
    })
  }
  function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }
  const uploadButton = (
    <div>
      <PlusOutlined />
      <div style={{ marginTop: 8 }}>选择</div>
    </div>
  );
  return <div className="container">
    <Form form={form} {...modalLayoutSm}>
      <Form.Item
          name="title"
          label="标题"
          rules={[
            {
              required: true,
              message: '请输入标题'
            }
          ]}
        > 
          <Input/>
        </Form.Item>
        <Form.Item
          name="unitName"
          label="系统名称"
          rules={[
            {
              required: true,
              message: '请输入系统名称'
            }
          ]}
        > 
          <Input/>
        </Form.Item>
        <Form.Item
          name="icp"
          label="备案号"
          rules={[
            {
              required: true,
              message: '请输入备案号'
            }
          ]}
        > 
          <Input/>
        </Form.Item>
        <Form.Item
          name="file"
          label="logo"
        > 
          <Upload listType="picture-card" className="avatar-uploader" {...uploadprops} style={{width:'100%'}}  showUploadList={false}>
            {
              imageUrl?<img src={window.location.origin+'/files'+imageUrl} alt="avatar" style={{ width: '100%' }} />:uploadButton
            }
          </Upload>
        </Form.Item>
        <Form.Item colon={false} label={<div></div>}>
          <Button onClick={save}>保存</Button>
        </Form.Item>
          
      </Form>
      {/* <Row gutter={16}>
        <Col span={8}>
          <iframe style={{width:'100%',height:'400px'}} src="https://ant.design/components/form-cn/"/>
        </Col>
        <Col span={8}>
          <iframe style={{width:'100%',height:'400px'}} src="https://33tool.com/idea/"></iframe>
        </Col>
        <Col span={8}>
          <iframe style={{width:'100%',height:'400px'}} src="https://news.qq.com/"></iframe>
        </Col>
      </Row> */}
  </div>
} 



export default connect(
  (state) => state,
  actions
)(RoleList)
